<template>
  <div class="box">
    <div class="title">
      <p>景区热度排行榜</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts" name="Rank">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

let charts = ref()
onMounted(() => {
  // 一个图形中展示多个图形图表
  let myChart = echarts.init(charts.value)
  myChart.setOption({
    // 标题组件
    /* title: {
      // 主标题
      text: '热门景区排行',
      right: '80px',
      // 主标题样式
      textStyle: {
        color: 'skyblue',
        fontSize: 20,
      },
      // 点击跳转地址
      link: 'https://www.baidu.com/index.htm',
      // 副标题
      subtext: '各大景区最新数据',
      // 副标题样式
      subtextStyle: {
        color: 'skyblue',
        fontSize: 16,
      },
    }, */
    // x|y轴组件
    xAxis: {
      // 在x轴均匀分布
      type: 'category',
      // 坐标轴刻度标签
      data: ['九寨沟', '泰山', '桂林', '丽江', '故宫', '西湖'],
      // 坐标轴刻度标签的相关设置。
      axisLabel: {
        color: '#fff',
        fontSize: 15,
      },
    },
    yAxis: {
      // 坐标轴名称
      name: '(热度)',
      // 坐标轴名称样式
      nameTextStyle: {
        color: '#fff',
        fontSize: 16,
        padding: [0, 20, 0, 0],
      },
      // 在y轴均匀分布
      // type:'category',
      // 轴线
      axisLine: {
        show: false,
      },
      // 分割线
      /* splitLine:{
        show:false
      }, */
      // 刻度
      axisTick: {
        show: true,
      },
      // 坐标轴刻度标签的相关设置。
      axisLabel: {
        color: '#fff',
        fontSize: 14,
      },
    },
    // 提示框组件
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        axis: 'x',
        label: {
          backgroundColor: 'skyblue',
          fontSize: 15,
        },
        crossStyle: {
          color: 'skyblue',
        },
        lineStyle: {
          color: 'skyblue',
        },
      },
      textStyle: {
        fontSize: 15,
      },
      backgroundColor: '#eee',
    },
    // 系列决定图形图表的样式
    series: [
      // 柱状图
      {
        type: 'bar',
        data: [10, 20, 23, 30, 40, 50],
        // 标签组件：图形上的文本标签
        label: {
          show: true,
          // 文字的位置
          position: 'insideTop',
          // 文字颜色
          color: '#fff',
          // 文字的大小
          fontSize: 15,
          // 文字格式
          // formatter: '{b}: {@score}',
        },
        // 每个柱状图的颜色
        itemStyle: {
          // color: '#5c7bd9',
          // 函数式写法
          color: function (data: any) {
            console.log(data) // 会自动注入每个柱条对象
            // 给每个柱条设置背景颜色
            let arr = [
              'rgb(255, 69, 0)',
              'rgb(255, 154, 0)',
              'rgb(0, 255, 0)',
              'rgb(238, 130, 238)',
              'rgb(75, 0, 130)',
              'rgb(0, 0, 255)',
            ]
            return arr[data.dataIndex]
          },
          borderRadius: [5, 5, 0, 0],
        },
        // 柱状图背景颜色
        /* showBackground: true,
        backgroundStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'white', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'aqua', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        }, */
      },
      // 折线图
      {
        type: 'line',
        data: [10, 20, 23, 30, 40, 50],
        // 平滑曲线
        // smooth: true,
        // 折线样式
        lineStyle: {
          color: 'pink',
        },
      },
    ],
    // 布局组件
    grid: {
      left: 30,
      right: 10,
      bottom: 30,
      top: 45,
    },
  })
})
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100%;
  margin-top: 15px;
  background: url(../../images/dataScreen-main-lt.png) no-repeat;
  background-size: 100% 100%;
  .title {
    margin-left: 15px;
    p {
      font-size: 20px;
      color: #fff;
      margin-bottom: 5px;
    }
  }
  .charts {
    height: calc(100% - 20px);
    width: 100%;
  }
}
</style>
